import React, { useContext } from "react";
import classNames from "classnames";
import { TabsContext } from "./tabs";

export interface TabItemProps {
  index?: string;
  className?: string;
  style?: React.CSSProperties;
  disabled?: boolean;
  children?: React.ReactNode;
  onSelect?: (selectIndex: number) => void;
  label: React.ReactNode;
}

const TabItem: React.FC<TabItemProps> = (props) => {
  const { index, disabled, label, className, style } = props;
  const context = useContext(TabsContext);
  const classes = classNames("tabs-item", className, {
    "is-active": context.index === index,
    "is-disabled": disabled,
  });
  const handleClick = () => {
    if (context.onSelect && !disabled && typeof index === "string") {
      context.onSelect(index);
    }
  };
  return (
    <li className={classes} style={style} onClick={handleClick}>
      <span>{label}</span>
    </li>
  );
};
TabItem.displayName = "TabItem";
export default TabItem;
